import {
  PageHeader,
  Tabs,
  Statistic,
  Descriptions,
  Card,
  Row,
  Col,
  Table,
  Button,
  message,
} from "antd";
import React, { Component } from "react";
import { Quotationdetail, Quotationreply } from "../../../services/auth";

const { TabPane } = Tabs;
const Content = ({ children, extra }) => (
  <div className="content">
    <div className="main">{children}</div>
    <div className="extra">{extra}</div>
  </div>
);

const columns = [
  {
    title: "产品编号",
    dataIndex: "goods_id",
    key: "goods_id",
    align: "center",
  },
  {
    title: "产品名称",
    dataIndex: "goods_name",
    key: "goods_name",
    align: "center",
  },
  {
    title: "订货数量",
    dataIndex: "quantity",
    key: "quantity",
    align: "center",
  },
  {
    title: "产品定价（件/元）",
    dataIndex: "price",
    key: "price",
    align: "center",
  },
  {
    title: "折扣",
    dataIndex: "discount",
    key: "discount",
    align: "center",
  },
  {
    title: "优惠价（件/元）",
    dataIndex: "current_price",
    key: "current_price",
    align: "center",
  },
];

export default class QuotationDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}, //询价单整体
      dataSource: [], //商品列表
    };
  }
  componentDidMount() {
    const { value } = this.props;
    Quotationdetail(value.id).then(
      (response) => {
        response.data.goods.push({
          goods_id: "总计",
          discount: response.data.discount,
          current_price: response.data.total_price,
        });
        this.setState({
          data: response.data,
          dataSource: response.data.goods,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }
  //页面刷新函数
  reset = (id) => {
    Quotationdetail(id).then(
      (response) => {
        response.data.goods.push({
          goods_id: "总计",
          discount: response.data.discount,
          current_price: response.data.total_price,
        });
        this.setState({
          data: response.data,
          dataSource: response.data.goods,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  };

  render() {
    const { data, dataSource } = this.state;
    return (
      <PageHeader
        className="site-page-header-responsive"
        title={`报价单编号：${data.id}`}
        subTitle={`——询价单编号：${data.inquiry_id}`}
        extra={
          data.status === "待回复"
            ? [
                <Button
                  key="2"
                  danger
                  onClick={() => {
                    Quotationreply(data.id, "已驳回").then(
                      (response) => {
                        message.success("已成功驳回！");
                        this.reset(this.props.value.id);
                      },
                      (error) => {
                        console.log("数据获取失败", error);
                      }
                    );
                  }}
                >
                  驳回
                </Button>,
                <Button
                  key="1"
                  type="primary"
                  onClick={() => {
                    Quotationreply(data.id, "已通过").then(
                      (response) => {
                        message.success("已成功通过！");
                        this.reset(this.props.value.id);
                      },
                      (error) => {
                        console.log("失败了", error);
                      }
                    );
                  }}
                >
                  通过
                </Button>,
              ]
            : []
        }
        footer={
          <Tabs defaultActiveKey="1">
            <TabPane tab="详情展示" key="1">
              <Card bordered={false}>
                <Table
                  dataSource={dataSource}
                  columns={columns}
                  pagination={false}
                  rowKey={(record) => record.goods_id}
                  bordered
                  size="small"
                />
              </Card>
            </TabPane>
          </Tabs>
        }
      >
        <Content
          extra={
            <div>
              <br />
              <Card bordered={false} bodyStyle={{paddingLeft:"0px",marginLeft:"-24px"}}>
                <Row gutter={16}>
                  <Col span={4}>
                    <Statistic title="状态" value={data.status} />
                  </Col>
                  <Col span={4}>
                    <Statistic title="订单折扣" value={`${data.discount}%`} valueStyle={{ color: '#3f8600' }}/>
                  </Col>
                  <Col span={4}>
                    <Statistic
                      title="总价"
                      prefix="¥"
                      value={data.total_price}
                      valueStyle={{ color: '#cf1322' }}
                    />
                  </Col>
                </Row>
              </Card>
            </div>
          }
        >
          <Descriptions size="default" column={2} bordered>
            <Descriptions.Item label="询价公司编号" contentStyle={{fontWeight:"bold"}}>
              {data.company_id}
            </Descriptions.Item>
            <Descriptions.Item label="询价公司名称" contentStyle={{fontWeight:"bold"}}>
              {data.company_name}
            </Descriptions.Item>
            <Descriptions.Item label="操作员编号" contentStyle={{fontWeight:"bold"}}>
              {data.operator_id}
            </Descriptions.Item>
            <Descriptions.Item label="操作员名称" contentStyle={{fontWeight:"bold"}}>
              {data.operator_name}
            </Descriptions.Item>
            <Descriptions.Item label="报价日期" contentStyle={{fontWeight:"bold"}}>
              {data.valid_from}
            </Descriptions.Item>
            <Descriptions.Item label="报价有效期至" contentStyle={{fontWeight:"bold"}}>
              {data.valid_to}
            </Descriptions.Item>
            <Descriptions.Item label="预计送达日期" contentStyle={{fontWeight:"bold"}}>
              {data.req_deliv_date}
            </Descriptions.Item>
            <Descriptions.Item label="预计送货地点" contentStyle={{fontWeight:"bold"}}>
              {data.ship_to_address}
            </Descriptions.Item>
          </Descriptions>
        </Content>
      </PageHeader>
    );
  }
}
